Efficiently Append Multiple Elements

Appending multiple elements to the DOM can be inefficient if done individually.

Use a document fragment to batch append operations.

const fragment = document.createDocumentFragment();
const container = document.getElementById('container');

for (let i = 0; i < 5; i++) {
    const newElement = document.createElement('div');
    newElement.textContent = `Item ${i + 1}`;
    fragment.appendChild(newElement);
}

container.appendChild(fragment);

/*
  This can be useful specially when dynamically you have to append content on web page.
*/

A Document Fragment is a lightweight container used to hold and manipulate a set of DOM elements before appending them to the main document.

It improves performance by minimizing the work the browser has to do when updating the webpage layout and appearance, which helps make page updates faster and smoother.

You Might Also Like

Apply Styles to Multiple Elements

Apply a style to multiple elements at once by adding a class. Here highlighting selected list items...

Learn More
Remove Multiple DOM Elements

Use a loop to detach elements and then remove them all at once. ``` const elementsToRemove = docum...

Learn More